<template>
  <div class="admin-container">
    <el-form ref="form" :model="searchForm" label-width="120px" size="small">
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称:" prop="name" class="search-item">
            <el-input v-model.trim="searchForm.name" placeholder="请输入" class="search-input" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label=" ">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            <el-button style="margin-left:20px" icon="el-icon-setting" @click="refresh">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="multipleTable" v-loading="loading" border stripe :data="tableData">
      <el-table-column label="编号" type="index" width="50" align="center" />
      <el-table-column label="类型" prop="type" align="center" />
      <el-table-column label="名称" prop="name" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="前缀" prop="prefix" align="center" />
      <el-table-column label="模板" prop="pattern" align="center" />
      <el-table-column label="流水长度" prop="length" align="center" />
      <el-table-column label="创建时间" prop="createTime" width="160" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updateTime" width="160" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermi="['system:sequence:edit']" type="text" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination :current-page="pageNumber" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin:20px" @size-change="onPageSizeChangeEvent"
        @current-change="onPageNumberChangeEvent" />
    </div>
    <el-dialog title="修改流水号规则" :visible.sync="sequenceRuleModalVisible" :mask-closable="false" width="600px" @on-visible-change="onSequenceRuleModalVisibleVisiableChange">
      <el-form ref="sequenceRuleForm" label-width="120px" :model="sequenceRuleForm" style="height:320px" size="small" :rules="rules">
        <el-form-item label="类型：" prop="type" class="search-item">
          <el-input v-model="sequenceRuleForm.type" placeholder="请输入" class="search-input" :disabled="true" />
        </el-form-item>
        <el-form-item label="名称：" prop="name" class="search-item">
          <el-input v-model.trim="sequenceRuleForm.name" placeholder="请输入" class="search-input" maxlength="50" show-word-limit />
        </el-form-item>
        <el-form-item label="前缀：" prop="prefix" class="search-item">
          <el-input v-model.trim="sequenceRuleForm.prefix" placeholder="请输入" class="search-input" maxlength="6" show-word-limit @change="prefixChange" />
        </el-form-item>
        <el-form-item label="模板：" prop="pattern" class="search-item">
          <el-input v-model.trim="sequenceRuleForm.pattern" placeholder="请输入" class="search-input" maxlength="20" show-word-limit @change="patternChange" />
        </el-form-item>
        <el-form-item label="流水长度：" prop="length" class="search-item">
          <el-input-number v-model="sequenceRuleForm.length" class="search-input" :min="1" :max="10" :precision="0" @change="lengthChange" />
        </el-form-item>
        <el-form-item label=" " class="search-item">
          <div class="example">
            <b>{{ example }}</b>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer" style="clear:both">
        <el-button @click="sequenceRuleModalVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { getList, editSequenceRule } from '@/api/system/sequence.js'

export default {
  name: 'Sequence',
  data () {
    return {
      // 加载效果
      loading: false,
      // 搜索条件
      searchForm: {},
      // 当前页
      pageNumber: 1,
      // 每页显示数
      pageSize: 10,
      // 总数据是不是
      total: 0,
      // 列表数据
      tableData: [],
      // 表单
      sequenceRuleForm: {},
      // 是否显示弹框
      sequenceRuleModalVisible: false,
      // 规则校验
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { max: 50, message: '长度小于等于50', trigger: 'blur' }
        ],
        prefix: [
          { required: true, message: '请输入前缀', trigger: 'blur' },
          { max: 6, message: '长度小于等于6', trigger: 'blur' }
        ],
        pattern: [
          { required: true, message: '请输入模板', trigger: 'blur' },
          { max: 20, message: '长度小于等于20', trigger: 'blur' }
        ],
        length: [
          { required: true, message: '流水长度', trigger: 'blur' }
        ]
      },
      // 流水号样例
      example: ''
    }
  },
  mounted () {
    this.initUIData()
  },
  methods: {
    prefixChange () {
      this.exampleChange()
    },
    patternChange () {
      this.exampleChange()
    },
    lengthChange () {
      this.exampleChange()
    },
    handleSave () {
      this.$refs.sequenceRuleForm.validate((valid) => {
        if (valid) {
          editSequenceRule(this.sequenceRuleForm).then(res => {
            if (res.result) {
              this.$message.success(res.message)
              this.fetchSequenceList()
              this.sequenceRuleModalVisible = false
            } else {
              this.$message.error('修改失败')
            }
          })
        }
      })
    },
    exampleChange () {
      this.example = this.sequenceRuleForm.prefix
      let { pattern } = { ...this.sequenceRuleForm }
      if (pattern === undefined) pattern = ''
      const myDate = new Date()
      let tmp = pattern.replace('#YYYY#', myDate.getFullYear())
      tmp = tmp.replace('#YY#', ('' + myDate.getFullYear()).substring(2, 4))
      tmp = tmp.replace('#MM#', (myDate.getMonth() + 1) < 10 ? '0' + (myDate.getMonth() + 1) : (myDate.getMonth() + 1))
      tmp = tmp.replace('#DD#', (myDate.getDate()) < 10 ? myDate.getDate() + 1 : myDate.getDate())
      this.example += tmp

      for (let index = 0; index < this.sequenceRuleForm.length - 1; index++) {
        this.example += '0'
      }
      this.example += '1'
    },
    handleEdit (row) {
      this.sequenceRuleForm = { ...row }
      this.exampleChange()
      if (this.$refs.sequenceRuleForm !== undefined) {
        this.$refs.sequenceRuleForm.resetFields()
      }
      this.sequenceRuleModalVisible = true
    },
    onSequenceRuleModalVisibleVisiableChange () {
    },
    handleSearch () {
      this.pageNumber = 1
      this.pageSize = 10
      this.fetchSequenceList()
    },
    initUIData () {
      this.fetchSequenceList()
    },
    async fetchSequenceList () {
      const param = { ...this.searchForm }
      param.pageNumber = this.pageNumber
      param.pageSize = this.pageSize
      this.loading = true
      getList(param).then(res => {
        // console.log(res.data);
        if (res.result) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        } else {
          this.tableData = []
          this.total = 0
        }
      })
    },
    onPageNumberChangeEvent (pageNumber) {
      this.pageNumber = pageNumber
      this.fetchSequenceList()
    },
    onPageSizeChangeEvent (pageSize) {
      this.pageSize = pageSize
      this.fetchSequenceList()
    },
    refresh () {
      this.pageNumber = 1
      this.pageSize = 10
      this.searchForm = {}
      this.fetchSequenceList()
    }
  }
}
</script>

<style scoped>
.example {
  /* margin-left: 220px; */
  font-size: 25px;
  /* align-content: center; */
  color: #888;
}

.table-pagination {
  margin-top: 20px;
  text-align: right;
}
.search-label {
  width: 100px;
  text-align: right;
  padding-right: 10px;
  display: inline-block;
}
.search-col {
  margin: 10px 0;
}
.search-field {
  width: 180px;
}
.select-count {
  font-size: 13px;
  font-weight: 600;
  color: #40a9ff;
}
.select-clear {
  margin-left: 10px;
  color: #40a9ff;
}
</style>
